<template>
    <div class="category">
        <Row type="flex" justify="space-between">
            <Col span="10" style="padding: 0px 8px;">
                <Card :bordered="false">
                    <p slot="title" v-if="editShow">更新分类</p>
                    <p slot="title" v-else>添加分类</p>
                    <Form ref="categoryForm" :model="category" label-position="top" :rules="ruleValidate">
                        <FormItem label="名称" required prop="catName">
                            <Input v-model="category.catName"></Input>
                        </FormItem>
                        <FormItem label="描述" prop="description">
                            <Input v-model="category.description" type="textarea"></Input>
                        </FormItem>
                        <FormItem>
                            <Row type="flex" justify="space-between" class="code-row-bg">
                                <Col span="8">
                                    <Button type="primary" @click="handleSubmit()">保存</Button>
                                    <Button type="dashed" @click="handleBack()" v-if="editShow">返回添加</Button>
                                </Col>
                                <Col span="2">
                                    <Poptip
                                        confirm
                                        title="确定删除?"
                                        @on-ok="delOk"
                                        @on-cancel="delCancel"
                                        ok-text="确定"
                                        cancel-text="取消">
                                        <Button type="error" v-if="editShow" style="position: relative; right: 5px">删除</Button>
                                    </Poptip>
                                </Col>
                            </Row>
                        </FormItem>
                    </Form>
                </Card>
            </Col>
            <Col span="14" style="padding: 0px 8px;">
                <Card :bordered="false">
                    <p slot="title">所有分类</p>
                    <Table :columns="categoryColumns" :data="categoryList">
                        <template #action="{ row, index }">
                            <Button type="primary" size="small" style="margin-right: 5px" @click="edit(row)">编辑</Button>
                        </template>
                    </Table>
                    <Page @on-change="pageChange" :total="total" :pageSize="10" show-total style="text-align: right; margin-top: 15px;"/>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>

export default {
    name: 'category',
    methods: {
        async handleSubmit() {
            this.$refs.categoryForm.validate(async (valid) => {
                if (!valid) {
                    return false
                }
                const param = this.category
                const res = await this.$api.category(param)
                if (!res.success) {
                    this.$Message.error(res.message)
                    return false
                }
                this.$Message.success('添加成功!')
                await this.categoryPage()
            })
        },
        // 分类分页列表
        async categoryPage(params) {
            const { current, size } = this
            const param = {
                current,
                size,
                ...params,
            }
            const res = await this.$api.categoryPage(param)
            if (!res.success) {
                this.$Message.error(res.message)
                return false
            }
            this.categoryList = res.data.records
            this.total = res.data.total
        },
        // 分页切换
        async pageChange(page) {
            const params = {
                current: page,
                size: 10,
            }
            await this.categoryPage(params)
        },
        // 编辑
        edit(category) {
            this.category = this._.cloneDeep(category)
            this.editShow = true
        },
        // 重置
        reset() {
            this.category = {
                catName: '',
                description: '',
            }
            this.editShow = false
        },
        // 返回添加
        handleBack() {
            this.reset()
            this.editShow = false
        },
        // 删除确定
        async delOk() {
            const id = this.category.id
            const res = await this.$api.categoryDelete(id)
            if (!res.success) {
                this.$Message.error(res.message)
                return false
            }
            this.$Message.success('删除成功!')
            await this.categoryPage()
            this.reset()
        },
        // 删除取消
        delCancel() {
            console.log('取消')
        },
        // 初始化
        init() {
            // 分类分页列表
            this.categoryPage()
        },
    },
    mounted() {
        this.init()
    },
    data() {
        return {
            // 编辑展示标识
            editShow: false,
            // 分类表单数据
            category: {
                catName: '',
                description: '',
            },
            // 表单验证规则
            ruleValidate: {
                catName: [
                    { required: true, message: '分类名称不能为空', trigger: 'blur' },
                ],
            },
            // 页码
            current: 1,
            // 页长
            size: 10,
            // 总数
            total: 0,
            // 列数组
            categoryColumns: [
                {
                    title: '分类名称',
                    key: 'catName',
                },
                {
                    title: '分类描述',
                    key: 'description',
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 150,
                    align: 'center',
                },
            ],
            // 分类数据
            categoryList: [],
        }
    },
}
</script>

<style scoped>
</style>
